<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model="uname" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "夜夜",
      //对象在内存中 存的是地址  所以需要深度侦听抓捕数据是否有变化
      dog: {
        name: "吱吱",
        age: 2,
      },
    };
  },
  watch: {
    //写对象格式
    uname: {
      handel(val) {
        console.log(val);
      },
    },
    immediate: true, //立即侦听,页面打开,马上就执行一次侦听器函数

    dog: {
      handel(val) {
        console.log(val);
      },
      deep: true, //表示深度侦听,当对象的任意属性改变后,都会触发该侦听器
    },

    //只侦听某个对象的一个属性时:
    // 'dog.name'(val){
    //   console.log(val);
    // }
  },
};
</script>

<style lang="scss" scoped>
</style>